<template>
	<view class="guide" v-if="showGuide">
		<view :style="guideStyle" class="guide-box">
			<view class="tips guide-step-tips" :style="tipPosition">
				<view class="text" v-if="guideInfo">{{ guideInfo.tips }}</view>
				<view class="tool-btn">
					<text @click="skip">跳过</text>
					<view class="next" @click="next">下一步</view>
				</view>
			</view>
			<!-- 三角形 -->
			<view class="arrow" :style="arrowTop"></view>
			<!-- 三角形END -->
		</view>
		<!-- 遮罩层，防止点击 -->
		<view class="v-model"></view>
		<!-- - z-index:1000 -->
	</view>
</template>
 
<script>
	import shileding from './shileding.js'
	export default {
		name: "guideStep",
		props: {
			step: {
				type: Object,
				default: () => {
					return {}
				},
			}
		},
		data() {
			return {
				stepName: 'step', //该提示步骤的名称，用于不在重复展示
				guideList: [],
				index: 0, // 当前展示的索引
				showGuide: true, // 是否显示引导
				guideStyle: '', // 默认样式
				arrowTop: '', //步骤提示三角形的定位
				tipPosition: '', //步骤提示的定位
				systemInfo: '', //屏幕宽度高度等信息
				tipWidth: 200, //步骤提示默认的宽度
				enableScroll: false //是否开启滚动
			}
		},
		computed: {
			guideInfo() {
				return this.guideList[this.index];
			}
		},
		mounted() {
			this.guideList = this.step.guideList;
			this.stepName = this.step.name; //workbenchKey

			const systemInfo = uni.getSystemInfoSync();
			this.systemInfo = systemInfo;
			const guide = uni.getStorageSync(this.stepName);
			if (!guide) {
				this.getDomInfo()
			} else {
				this.stopGuide()
			}
		},
		methods: {
			/**
			 * @param {Object} className,可点击区域的class名称
			 */
			analyseTarget(className) {
				// #ifdef APP-PLUS
				const view = uni.createSelectorQuery().in(this.$root).select(className)
				let shiledingNode = {}
				let shiledingNameArr = []
				setTimeout(() => {
					view.fields({
						rect: true,
						size: true,
						computedStyle: true
					}, data => {
						shiledingNode = new shileding({
							top: data.top,
							left: data.left,
							height: data.height,
							width: data.width,
						})
						shiledingNode.init() //渲染矩形拦截滑动事件，目标区域可点击（生成4个矩形，围绕需要点击的className区域）
					}).exec()
				}, 40)
				// #endif

			},
			destroyMask() {
				console.log('destroyMask')
				// #ifdef APP-PLUS
				const view1 = plus.nativeObj.View.getViewById('section1')
				const view2 = plus.nativeObj.View.getViewById('section2')
				const view3 = plus.nativeObj.View.getViewById('section3')
				const view4 = plus.nativeObj.View.getViewById('section4')
				view1.close()
				view2.close()
				view3.close()
				view4.close()
				// #endif

				// document.addEventListener('plusready',function () {  

				// },false);
			},

			// 展示新手提示
			viewTips(data, scrollTop) {
				//data是值.content1的位置信息，scrollTop是指.content1的滚动位置
				// 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度
				if (data) {
					let newWidth = this.systemInfo.screenWidth - 20;
					if (data.width >= newWidth) {
						data.width = newWidth;
					}
					// 如果距离左边为0,自动增加一点左边距
					if (data.left == 0) {
						data.left = 10;
					}

					let domRW = this.systemInfo.screenWidth - data.left;

					let left = 0;
					// 如果dom距离右边没有tips的宽度大的话,就要让tips向左偏移
					if (domRW < this.tipWidth) {
						left = domRW - this.tipWidth - 30;
					}
					const index = this.index;
					// 步骤条展示的高度需要加上屏幕滚动的高度
					data.top += scrollTop;
					// 根据实际情况需要滚动到展示区域
					uni.pageScrollTo({
						scrollTop: data.top > 20 ? data.top - 20 : 0,
						duration: 0
					})
					let obj = Object.assign(this.guideList[index], data);
					// 设置三角形高度
					
					let arrowTop = data.height + 9;
					this.arrowTop = "top:" + arrowTop + 'px;';
					// 设置提示框定位
					this.tipPosition = "top:" + (arrowTop + 5) + 'px;left:' + left + "px;";
					// 重新设置guideList的值
					
					this.guideList.splice(index, 1, obj);
					this.guideStyle = this.getStyle();
				} else {
					this.index += 1;
					this.getDomInfo();
				}
			},
			// 获取步骤提示的主要样式
			getStyle() {
				const {
					width,
					height,
					left,
					top,
					style
				} = this.guideInfo;
				let newstyle = "width:" + width + "px;";
				newstyle += "height:" + height + "px;";
				newstyle += "left:" + left + "px;";
				newstyle += "top:" + top + "px;";
				newstyle += "box-shadow: rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;";
				newstyle += style;
				return newstyle;
			},
			// 获取dom信息
			getDomInfo() {
				const {
					el
				} = this.guideInfo;
				const query = uni.createSelectorQuery().in(this.$root);
				setTimeout(() => {
					query.select(el).boundingClientRect()
					query.selectViewport().scrollOffset()

					var _this = this;
					query.exec(function(res) {
						let data = res[0] // #the-id节点的上边界坐标
						let scrollTop = res[1].scrollTop // 显示区域的竖直滚动位置
						_this.viewTips(data, scrollTop)
						
						//做一个延时，让定位完成后再执行覆盖遮罩区域
						setTimeout(()=>{
							_this.$nextTick(() => {
								//必须是下一次更新了DOM后执行
								_this.analyseTarget('.guide-step-tips')
							})
						},200)
					})
				}, 10)

			},
			// 跳过新手提示
			stopGuide() {
				//去除vue节点
				this.showGuide = false;
				// 设置缓存标记
				uni.setStorageSync(this.stepName, 'true');
			},
			// 跳过新手提示
			skip() {
				//销毁遮罩
				this.destroyMask()
				this.stopGuide()
				this.index = 0
			},
			// 下一步
			next() {
				//销毁遮罩
				this.destroyMask()
				if (this.index === this.guideList.length - 1) {
					this.stopGuide()
				} else {
					this.index += 1;
					this.getDomInfo();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.v-model {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: .6;
		z-index: 1000;
	}

	.guide {
		z-index: 1001;

		.guide-box {
			position: absolute;
			z-index: 10001;
			transition: all 0.2s;

			&::before {
				content: '';
				height: 100%;
				width: 100%;
				height: 24rpx;
				width: 24rpx;
				// border: 1px dashed #fff;
				// border-radius: 8rpx;
				position: absolute;
				top: -8rpx;
				left: -8rpx;
				padding: 7rpx;
			}

			.arrow {
				height: 18rpx;
				width: 18rpx;
				background: #F97316;
				position: absolute;
				top: 144rpx;
				left: 40%;
				transform: rotate(45deg);
			}

			.tips {
				width: 400rpx;
				background: linear-gradient(180deg, #F97316, #F59E0B);
				box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
				color: #fff;
				position: absolute;
				top: 152rpx;
				left: -50%;
				padding: 15rpx 20rpx;
				font-size: 28rpx;
				border-radius: 12rpx;

				.text {}

				.tool-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 0rpx;
					margin-top: 20rpx;

					.next {
						background: #fff;
						height: 48rpx;
						width: 100rpx;
						text-align: center;
						border-radius: 8rpx;
						color: #666;
						line-height: 48rpx;
						font-size: 24rpx
					}
				}
			}
		}
	}
</style>
